<template>
  <div class="organPage">
    <div class="test">
      <div class="left">
        <el-tree
          :data="treeList"
          :props="props"
          node-key="id"
          :current-node-key="'1024980990084376673'"
          :default-expanded-keys="['1024980958136362977']"
          :default-checked-keys="['1024980958136362977']"
          highlight-current
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
        ></el-tree>
      </div>

      <div class="right">
        <!-- 机构 -->
        <el-card class="card1">
          <template #header>
            <span>机构信息</span>
          </template>
          <el-form label-width="90px" :model="organList">
            <el-row type="flex" justify="space-between">
              <el-col :span="8">
                <el-form-item label="机构编号">
                  <el-input v-model="organList.id" disabled> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构名称">
                  <el-input v-model="organList.name" disabled> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构类型">
                  <el-select
                    v-model="organList.type"
                    disabled
                    placeholder="请选择"
                    style="width=40px"
                  >
                    <el-option
                      v-for="(item, index) in typeList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="机构地址">
                  <el-row style="margin: 0px">
                    <el-col :span="8" style="padding: 0px">
                      <el-select
                        v-model="organList.province.id"
                        placeholder="请选择省份"
                        disabled
                        style="width: 99%"
                      >
                        <el-option
                          v-for="item in plist"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8" style="padding: 0px">
                      <el-select
                        v-model="organList.city.id"
                        disabled
                        placeholder="请选择市"
                        style="width: 99%"
                      >
                        <el-option
                          v-for="item in clist"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8" style="padding: 0px">
                      <el-select
                        v-model="organList.county"
                        disabled
                        placeholder="请选择县/区"
                        style="width: 99%"
                      >
                        <el-option
                          v-for="item in coulist"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="8">
                <el-form-item label="详细地址">
                  <el-input v-model="organList.address" disabled> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经度">
                  <el-input v-model="organList.longitude" disabled>
                    <span slot="suffix">E</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纬度">
                  <el-input v-model="organList.latitude" disabled>
                    <span slot="suffix">E</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="机构负责人">
                  <el-input v-model="organList.managerName" disabled>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构电话">
                  <el-input v-model="organList.phone" disabled> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-button>编辑</el-button>
            </el-row>
          </el-form>
        </el-card>

        <!-- 员工 -->
        <el-card style="margin-top: 16px" class="card2">
          <template #header>
            <span>员工信息</span>
          </template>
          <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="userId" label="员工编号" width="200">
            </el-table-column>
            <el-table-column prop="name" label="员工姓名"> </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="150">
            </el-table-column>
            <el-table-column prop="agency.name" label="所属机构" width="120">
            </el-table-column>
            <el-table-column prop="account" label="系统账户" width="120">
            </el-table-column>
            <el-table-column prop="stationName" label="系统角色">
            </el-table-column>
            <el-table-column label="账号状态">
              <template #default="{ row }">
                <div class="ok" v-if="row.status === 1">正常</div>
                <div class="no" v-else>禁用</div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getEmployeeInfoApi, getOrgizationInfoApi, getOrgizationTree } from '@/api/organ'
export default {
  name: 'organIndex',
  data () {
    return {
      treeList: [], // 机构tree
      props: {
        label: 'name',
        children: 'children',
        id: 'id'
      },
      tableData: [], // 员工信息
      value: '',
      plist: [], // 机构下拉框省份表
      clist: [], // 机构下拉城市表
      coulist: [], // 机构下拉县表
      typeList: [], // 机构类型
      // 机构详情表
      organList: {
        id: '', // 编号
        name: '', // 名称
        type: '', // 机构类型
        address: '', // 地址
        longitude: '', // 经度
        latitude: '', // 纬度
        managerName: '', // 负责人
        phone: '', // 电话
        province: {},
        city: {},
        county: {}
      },
      page: 1,
      pageSize: 5,
      total: 0
    }
  },
  created () {
    this.getTreeList()
  },
  methods: {
    async handleNodeClick (data) {
      // 获取机构信息
      // console.log(data);
      const res = await getOrgizationInfoApi(data.id)
      // console.log(res);
      this.organList = res.data
      this.plist = [res.data.province]
      this.clist = [res.data.city]
      this.coulist = [res.data.county]
      if (res.data.type === 1) {
        this.organList.type = '一级转运中心'
        this.typeList = ['一级转运中心']
      } else if (res.data.type === 2) {
        this.organList.type = '二级转运中心'
        this.typeList = ['二级转运中心']
      } else {
        this.organList.type = '营业部'
        this.typeList = ['营业部']
      }
      console.log(this.organList)
      // console.log(this.organList.province);

      // 获取员工信息
      const res1 = await getEmployeeInfoApi({
        page: this.page,
        pageSize: this.pageSize
      })
      // console.log(res1);
      this.tableData = res1.data.items
      this.total = res1.data.items.length
      console.log(this.tableData)
    },
    async getTreeList () {
      const res = await getOrgizationTree()
      // console.log(res.data);
      this.treeList = JSON.parse(res.data)
      // console.log(this.treeList);
    }
  }
}
</script>

<style lang="scss" scoped>
.organPage {
  width: 100%;
  padding: 20px;
  min-height: 870px;
  padding-top: 23px !important;
  .test {
    width: 100%;
    display: -webkit-box;
    .left {
      background-color: #fff;
      border-radius: 4px;
      height: auto !important;
      width: 214px;
      padding-left: 9px;
      padding-top: 10px;
      ::v-deep .el-tree {
        padding-left: 10px;
        margin-top: 5px !important;
        // 不旋转
        .el-tree-node__expand-icon.expanded {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        .el-tree-node {
          margin: 5px 0 !important;
        }
        .el-tree-node__content {
          margin-right: 20px;
          height: 30px !important;
        }
      }
      // 高亮
      ::v-deep
        .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        background-color: #fff;
        color: #ff7a63 !important;
      }
      // 一级未展开
      ::v-deep .el-icon-caret-right:before {
        background: url()
          no-repeat;
        width: 14px;
        height: 13px;
        background-size: 100% 100%;
        content: "";
        display: block;
      }
      // 一级展开
      ::v-deep .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        transform: none !important;
        background: url()
          no-repeat;
        width: 14px;
        height: 13px;
        background-size: 100% 100%;
        content: "";
        display: block;
      }
      // 二级未展开
      ::v-deep .el-tree-node__children .el-icon-caret-right:before {
        background: url()
          no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100% 100%;
        content: "";
        display: block;
      }
      // 二级展开
      ::v-deep
        .el-tree-node__children
        .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        transform: none !important;
        background: url()
          no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100% 100%;
        content: "";
        display: block;
      }
      // 没有子节点
      ::v-deep .el-tree-node__expand-icon.is-leaf::before {
        background: none;
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        font-size: 14px;
        background-size: 14px;
      }
    }
    .right {
      background-color: #f3f4f7;
      border-radius: 4px;
      -webkit-box-flex: 1;
      margin-left: 20px;
    }
  }
}
::v-deep .el-card__header {
  font-weight: 700;
  font-size: 16px;
  background-color: #fafafa;
}
::v-deep .card1 {
  label {
    font-weight: 700;
    color: #20232a;
  }
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
    background: #e15536;
    border-radius: 4px;
    border-color: transparent;
    color: #fff;
  }
  .el-input__suffix-inner {
    span {
      color: rgb(32, 35, 42);
      font-weight: 400;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      margin-right: 14px;
      line-height: 40px;
    }
  }
}
::v-deep .card2 {
  .el-table {
    border: 1px solid #ebeef5;
    thead tr th {
      background: #f8faff;
    }
  }
  .ok::before {
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 6px;
  }
  .no::before {
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 6px;
  }
}
</style>
